<template>
  <div>
    <h1>app.vue</h1>
    <button @click="wife = '高圆圆'">修改wife</button>
    <p>老婆是： {{ wife }}</p>
    <p>money时： {{ money }}</p>
    <p>{{ obj }}</p>

    <!-- 子组件 -->
    <!-- :mother="wife" 这句话的意思是把当前组件里的wife给son里的mother -->
    <!-- 把父的money给子里的money -->
    <!-- <son 
      :mother="wife" 
      :money="money" 
      :obj="obj" 
      @changemoney="fn1" 
    /> -->


    <!-- 
      $event在原生标签里代表事件对象
      $event在组件里，代表了子传递过来的数据 
    -->
    <son 
      :mother="wife" 
      :money="money" 
      :obj="obj" 
      @changemoney="money = $event" 
    />
  </div>
</template>

<script>
import son from "./components/son";
export default {
  methods: {
    // fn1 (num) {
    //   // 把子传递过来的数据修改到money
    //   this.money = num
    // }
  },
  components: {
    son,
  },
  data() {
    return {
      wife: "刘亦菲",
      money: 9999,
      obj: {
        name: "jack",
        age: 16,
      },
    };
  },
};
</script>

<style>
</style>